<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item in banner">
				<view class="swiper-item"><image :src="item.img_url" mode=""></image></view>
			</swiper-item>
		</swiper>
		<view class="detail">
			<rich-text :nodes="desc"></rich-text>
		</view>
		
		<uni-goods-nav class="footer" :fill="true"  :options="options" :buttonGroup="buttonGroup"  @buttonClick="buttonClick"  @click="handlerLeftButton"/>
		<!-- option 是底部导航的配置数据 -->
		<!-- @buttonClick 是点击右侧按钮触发的事件 里面的index代表了点击第几个按钮 -->
	</view>
</template>

<script>
import { getDetail } from '../../request/api.js';
import {mapMutations} from "vuex"
export default {
	data() {
		return {
			banner: [],
			info: '',
			desc:"",
			options: [
				{
					icon: 'headphones',
					text: '客服'
				},
				{
					icon: 'shop',
					text: '店铺',
					info: 2,
					infoBackgroundColor: '#007aff',
					infoColor: 'red'
				},
				{
					icon: 'cart',
					text: '购物车',
					info: 2
				}
			],
			buttonGroup: [
				{
					text: '加入购物车',
					backgroundColor: '#ff0000',
					color: '#fff'
				},
				{
					text: '立即购买',
					backgroundColor: '#ffa200',
					color: '#fff'
				}
			]
		};
	},
	methods: {
		...mapMutations(["add"]),
		buttonClick(e){
			console.log(e);
			// 代表点的是第一个按钮
			if(e.index==0)
			this.add(this.info)
			
		},
		handlerLeftButton(e){
			console.log(e)
			if(e.index==2){
				uni.switchTab({
					url:"/pages/shopcar/shopcar"
				})
			}
			
		}
	},
	onLoad(options) {
		// console.log(options);
		// let {id}=options
		getDetail(options).then(res => {
			console.log(res);
			this.banner = res.gallery;
			this.info = res.info;
			this.desc=res.info.goods_desc.replace(/\<img/gi,'<img class="img"')
			//替换富文本 或者往富文本中加东西 都可以用这种方法实现
			console.log(this.desc);
		});
	}
};
</script>

<style lang="scss" scoped>
	.detail{
		background: red;
		 ::v-deep .img{
			width: 750rpx;
		}
		
	}
	.footer{
		width: 100%;
			position:fixed;
			bottom: 0;
			left:0;
		}
	
</style>
